<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      http-equiv="X-UA-Compatible"
      content="IE=edge"
    />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0"
    />
    <title>菜单列表</title>
    <link
      rel="stylesheet"
      href="./css/style.css"
    />
  </head>

  <body>
    <h3 class="big-tit">菜谱列表</h3>
    <ul class="list-box">
      <script
        type="text/html"
        id="tpl-list"
      >
        {{each data.list}}

        <li>
          <a
            href="http://124.223.14.236:3001/public/static/food_info.html?id={{$value.id}}"
          >
            <img
              src="http://124.223.14.236:3001/public/{{$value.img}}"
              alt=""
            />
            <h3>{{$value.name}}</h3>
          </a>
        </li>

        {{/each}}
      </script>

      <li>
        <a href="info.html">
          <img
            src="http://yun.itheima.com/Upload/Images/20220627/62b924298e658.jpg"
            alt=""
          />
          <h3>菜单名称</h3>
        </a>
      </li>
    </ul>
    <p class="more">数据正在加载中...</p>
    <p class="noinfo">没有数据了...</p>

    <script src="../jquery.js"></script>
    <script src="../template-web.js"></script>

    <script>
      $(function () {
        $.ajax({
          method: 'GET',
          url: 'http://124.223.14.236:3001/api/recipe?pageSize=12&pageNum=1',
          success: function (res) {
            console.log(res.data)
            if (res.msg == '操作成功') {
              let data = res.data.list
              let htmlStr = template('tpl-list', res)
              $('.list-box').html(htmlStr)
            }
          },
        })

        $(document).on('scroll', function () {
          const A = $(this).scrollTop()
          console.log(A)
          if (A < 300) {
            $('.more').show()
            $('.noinfo').hide()
          } else if (A > 324 && A < 326) {
            $.ajax({
              method: 'GET',
              url: 'http://124.223.14.236:3001/api/recipe?pageSize=12&pageNum=2',
              success: function (res) {
                console.log(res.data)
                if (res.msg == '操作成功') {
                  let data = res.data.list
                  let htmlStr = template('tpl-list', res)
                  $('.list-box').append(htmlStr)
                }
              },
            })
          } else if (A > 1400 && A < 1402) {
            $.ajax({
              method: 'GET',
              url: 'http://124.223.14.236:3001/api/recipe?pageSize=12&pageNum=3',
              success: function (res) {
                console.log(res.data)
                if (res.msg == '操作成功') {
                  let data = res.data.list
                  let htmlStr = template('tpl-list', res)
                  $('.list-box').append(htmlStr)
                }
              },
            })
          } else if (A > 1938 && A < 1940) {
            $.ajax({
              method: 'GET',
              url: 'http://124.223.14.236:3001/api/recipe?pageSize=12&pageNum=4',
              success: function (res) {
                console.log(res.data)
                if (res.msg == '操作成功') {
                  let data = res.data.list
                  let htmlStr = template('tpl-list', res)
                  $('.list-box').append(htmlStr)
                  $('.more').hide()
                  $('.noinfo').show()
                }
              },
            })
          }
        })
      })
    </script>
  </body>
</html>
